<template>
  <view class="container">
    <scroll-view 
			scroll-y scroll-anchoring scroll-with-animation 
			:scroll-top="scrollTop" 
			@scroll="handleScroll" 
			:style="{height: `calc(100vh - 40rpx)`}" 
			refresher-enabled 
			@refresherrefresh="refresherrefresh" 
			:refresher-triggered="triggered"
		>
			<view style="content: ''; overflow: hidden;"></view>

			<view style="padding: 20rpx;">
				<view style="overflow: hidden;" class="category-group" v-for="(item, index) in dataList" :key="index">
					<view class="category">{{item[0].text}}</view>
					<view class="list">
						<block v-for="(it, i) in item[1]">
							<goodsCardVue @showSpecification="showSpecification" :goods="it" @onChangeGoods="handleChangeGoods($event, index, i)" />
						</block>
					</view>
				</view>
			</view>
			<view :style="{height: `calc(140rpx + 300rpx + ${customBar}px)`}"></view>
			<view style="content: ''; overflow: hidden;"></view>
    </scroll-view>
		<van-popup 
			:show="isShowSpecification" 	
			@click-overlay="closeSpecification" 
			round z-index="9999"
		>
			<specificationCardVue 
				:goods="goodsSpecification" 
				:isShow="isShowSpecification" 
				@onChangeGoods="specificationChangeGoods" 
				@clearGoodsNum="clearGoodsNum"
			/>
		</van-popup>
  </view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	import goodsCardVue from './goods-card.vue'
	import specificationCardVue from './specification-card.vue'
	import {hyh_showModal} from '@/utils/hyh_uni_utils.js'
  export default {
    data() {
      return {
				scrollTop: -1,
				flag: false,
				triggered: false,
				isShowSpecification: false,
				goodsSpecification: {}
      }
    },
		props: ['hasMore', 'loading', 'customBar', 'headerHeight'],
		computed: {
			...mapState({
				mapScrollTop: state => state.order.mapScrollTop,
				dataList: state => state.order.dataList,
			}),
			...mapGetters(['shoppingCart'])
		},
		components: {goodsCardVue, specificationCardVue},
		onLoad() {
			uni.$on('getElOffSetTop', this.getElOffSetTop.bind(this))
		},
    methods: {
			async showSpecification(goods) {
				const flag = await this.$store.dispatch('veriftUserInfo')
				if (!flag) return
				this.goodsSpecification = goods
				this.isShowSpecification = true
			},
      setScrollTop(index){
				const top = this.mapScrollTop[index]
				this.scrollTop = this.scrollTop == top ? top - 0.5 : top
				this.flag = true
			},
			handleScroll(e) {
				if (this.flag) return this.flag = false
				const top = e.detail.scrollTop
				const index = this.mapScrollTop.findIndex(e => top <= e) - 1
				this.$store.commit('setSideActiveKey', index < 0 ? 0 : index)
			},
			async handleChangeGoods(num, index, i) {
				const flag = await this.$store.dispatch('veriftUserInfo')
				flag && this.$store.commit('changeGoodsNum', [index, i, num])
				// ------- 分享订单 商品操作更新
				const {shareOrderTimer, shareIndent} = this.$store.state.order
				if (shareOrderTimer) {
					const res = await uniCloud.callFunction({
						name: 'update-share-order',
						data: {
							indentId: shareIndent.order_form_num._value,
							shoppingCart: this.shoppingCart
						}
					})
					console.log('---------', res);
				}
			},
			closeSpecification() {
				this.isShowSpecification = false
				this.goodsSpecification.num = 0
			},
			clearGoodsNum() {
				this.goodsSpecification.num = 0
			},
			async specificationChangeGoods([selected, num]) {
				console.log(999);
				this.goodsSpecification.num += num
				const goods = {...this.goodsSpecification,specificationSelected: [...selected]}
				this.$store.commit('setSpecificationList', [goods, num])
				// ------- 分享订单 商品操作更新
				const {shareOrderTimer, shareIndent} = this.$store.state.order
				if (shareOrderTimer) {
					const res = await uniCloud.callFunction({
						name: 'update-share-order',
						data: {
							indentId: shareIndent.order_form_num._value,
							shoppingCart: this.shoppingCart
						}
					})
					console.log('---------', res);
				}
			},
			async refresherrefresh() {
				let flag = true
				this.triggered = true;
				try{
					if (this.shoppingCart.length){
						flag = await hyh_showModal({
							title: '提示',
							content: '刷新商品会重置购物车, 是否继续',
						})
					}
					if (!flag) return (this.triggered = false)
					this.$emit("onReloadData", () => {
						this.triggered = false
						setTimeout(() => {
							this.getElOffSetTop()
						}, 200)
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			getElOffSetTop() {
				wx.createSelectorQuery().in(this).selectAll('.category').boundingClientRect().exec((res) => {
					const mapScrollTop = res[0].map(e => e.top - 10 - this.headerHeight)
					this.$store.commit('setMapScrollTop', mapScrollTop)
				})
			}
    },
  }
</script>

<style lang="scss">
	page {
		--stepper-background-color: transparent;
		--stepper-button-disabled-color: transparent;
		--stepper-input-disabled-background-color: transparent;
	}
	.uni-load-more__text {
		font-size: 24rpx !important;
	}

	.container {
		scroll-view {
			position: relative;
		}
		.category {
			color: #828282;
			font-size: 28rpx;
			margin: 20rpx 0;
		}
	}
</style>
